<template>
  <div class="dashboard-editor-container">
    <el-row>
      <h2 class="card-panel" style="background-color: white; padding: 10px">
        今日情况
      </h2>
    </el-row>

    <panel-group @handle-set-line-chart-data="handleSetLineChartData" />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <line-chart :chart-data="lineChartData" :cahrtTitle="chartTitle" />
    </el-row>

    <!-- <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="24"
        :lg="8"
      >
        <div class="chart-wrapper">
          <radar-chart />
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :lg="8"
      >
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col
        :xs="24"
        :sm="24"
        :lg="8"
      >
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col
        :xs="{span: 24}"
        :sm="{span: 24}"
        :md="{span: 24}"
        :lg="{span: 12}"
        :xl="{span: 12}"
        style="padding-right:8px;margin-bottom:30px;"
      >
        <transaction-table />
      </el-col>
      <el-col
        :xs="{span: 24}"
        :sm="{span: 12}"
        :md="{span: 12}"
        :lg="{span: 6}"
        :xl="{span: 6}"
        style="margin-bottom:30px;"
      >
        <todo-list />
      </el-col>
      <el-col
        :xs="{span: 24}"
        :sm="{span: 12}"
        :md="{span: 12}"
        :lg="{span: 6}"
        :xl="{span: 6}"
        style="margin-bottom:30px;"
      >
        <box-card />
      </el-col>
    </el-row> -->
  </div>
</template>

<script lang="ts">
import "echarts/theme/macarons.js"; // Theme used in BarChart, LineChart, PieChart and RadarChart
import { Component, Vue } from "vue-property-decorator";
import GithubCorner from "@/components/GithubCorner/index.vue";
import BarChart from "./components/BarChart.vue";
import BoxCard from "./components/BoxCard.vue";
import LineChart, { ILineChartData } from "./components/LineChart.vue";
import PanelGroup from "./components/PanelGroup.vue";
import PieChart from "./components/PieChart.vue";
import RadarChart from "./components/RadarChart.vue";
import TodoList from "./components/TodoList/index.vue";
import TransactionTable from "./components/TransactionTable.vue";
import { parseTime, dateFormat } from "@/utils";
import { infoAllMetric, dateRange } from "@/api/cloudwebapi";

const lineChartData: { [type: string]: ILineChartData } = {
  出院人次: {
    expectedData: [],
    actualData: [],
    names: [],
  },
  入组病例数: {
    expectedData: [],
    actualData: [],
    names: [],
  },
  总住院费: {
    expectedData: [],
    actualData: [],
    names: [],
  },
  CMI: {
    expectedData: [],
    actualData: [],
    names: [],
  },
};

@Component({
  name: "DashboardAdmin",
  components: {
    GithubCorner,
    BarChart,
    BoxCard,
    LineChart,
    PanelGroup,
    PieChart,
    RadarChart,
    TodoList,
    TransactionTable,
  },
})
export default class extends Vue {
  private lineChartData = lineChartData.出院人次;
  private chartTitle = "出院人次";
  private handleSetLineChartData(type: string) {
    this.lineChartData = lineChartData[type];
    this.chartTitle = `${type}`;
  }
  private async created() {
    let cDate = new Date();
    let end = dateFormat(cDate, "yyyyMMdd");
    cDate.setDate(cDate.getDate() - 6);
    let start = dateFormat(cDate, "yyyyMMdd");
    let q = { time: "cysj_l", stime: start, etime: end };
    const { data } = await dateRange(q);
    if (data && data.length > 0) {
      let ls = data.sort((a: any, b: any) => a.time.localeCompare(b.time));

      console.log(ls);
      for (let i = 6; i >= 0; i--) {
        let cDate2 = new Date();
        cDate2.setDate(cDate2.getDate() - i);
        let fmt = dateFormat(cDate2, "yyyyMMdd");
        console.log(fmt);
        let ts = ls.filter((it: any) => it.time == fmt);
        for (let it of [
          {
            f1: "出院人次",
            f2: "count",
          },
          {
            f1: "入组病例数",
            f2: "ingrp",
          },
          {
            f1: "总住院费",
            f2: "zfy",
          },
          {
            f1: "CMI",
            f2: "weight",
          },
        ]) {
          if (ts.length > 0) {
            let ts2 = ts[0];
            lineChartData[it.f1].expectedData.push(ts2[it.f2]);
          } else {
            lineChartData[it.f1].expectedData.push(0);
          }
          lineChartData[it.f1].names.push(fmt);
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
